<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet" />
</head>
<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>


<script type="text/javascript" src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        dir: 'https://www.layuicdn.com/layui/',
        version: false,
        debug: false,
        base: ''
    });
</script>

<body>
    <iframe id="preview_iframe" style="width:320px;height:568px;"></iframe>
    <iframe id="preview_iframe_table_show" style="width:100%;height:568px;"></iframe>
</body>

<script>
    var array = [{
            "type": "text",
            "title": "文本型244",
            "column_name": "title",
            "is_require": true,
            "default_value": "",
            "is_multi_line": true,
            "place_holder": "占位符",
            "max_value": 10,
            "min_value": 5,
            "hidden": false,
            "is_horizontal":false
        },
        {
            "type": "html",
            "html": "<hr>"
        },
        {
            "type": "text",
            "title": "文本型22",
            "column_name": "title1",
            "is_require": false,
            "default_value": "天气真好",
            "is_multi_line": false,
            "place_holder": "请输入标题",
            "max_value": 20,
            "min_value": 2,
            "is_horizontal":false
        },
        {
            "type": "password",
            "title": "密码框",
            "column_name": "password",
            "is_require": false,
            "default_value": "",
            "place_holder": "请输入密码",
            "max_value": 20,
            "min_value": 2,
            "is_horizontal":false
        },
        {
            "type": "date",
            "title": "日期型",
            "column_name": "date",
            "is_require": true,
            "default_value": "2020-06-01",
            "place_holder": "占位符",
            "start_date_value": "2020-04-01",
            "end_date_value": "2020-06-07",
            "is_horizontal":false

        },
        {
            "type": "number",
            "title": "数值型",
            "column_name": "number",
            "is_require": true,
            "default_value": 5,
            "num_type": "整型",
            "unit": "个",
            "max_value": 20,
            "min_value": 2,
            "is_horizontal":false

        },
        {
            "type": "bool",
            "title": "开关型",
            "column_name": "bool",
            "is_require": false,
            "default_value": true,
            "tvalue": true,
            "fvalue": false,
            "ttitle": "是",
            "ftitle": "否",
            "is_horizontal":false

        },
        {
            "type": "select",
            "title": "选择框",
            "column_name": "select",
            "is_require": true,
            "default_value": "广州",
            "options": ["北京", "上海", "广州", "深圳", "杭州"],
            "options_title": ["北京", "上海", "广州", "深圳", "杭州"],
            "is_horizontal":false

        },
        {
            "type": "option",
            "title": "单选型",
            "column_name": "option",
            "is_require": false,
            "default_value": "选项3",
            "options": ["选项1", "选项2", "选项3"],
            "options_title": ["选项1", "选项2", "选项3"],
            "is_horizontal":false

        },
        {
            "type": "checkbox",
            "title": "多选型",
            "column_name": "checkbox",
            "is_require": false,
            "default_value": "选项3",
            "options": ["选项1", "选项2", "选项3"],
            "options_title": ["选项1", "选项2", "选项3"],
            "is_horizontal":false

        },
        {
            "type": "image",
            "title": "图片型",
            "column_name": "image",
            "is_require": true,
            "default_value": "https://www.dcdev.net/icon.png",
            "has_thumb": true,
            "thumb_default_value": "https://www.dcdev.net/icon.png",
            "is_horizontal":false

        },
        {
            "type": "image",
            "title": "图片型2",
            "column_name": "image2",
            "is_require": false,
            "default_value": "https://www.dcdev.net/icon.png",
            "has_thumb": true,
            "thumb_default_value": "https://www.dcdev.net/icon.png",
            "is_horizontal":false

        },
        {
            "type": "phone",
            "title": "手机验证",
            "column_name": "phone",
            "is_require": false,
            "default_value": "",
            "place_holder": "请输入手机号码",
            "max_value": 20,
            "min_value": 2,
            "is_horizontal":false
        },
        {
            "type": "email",
            "title": "邮箱验证",
            "column_name": "email",
            "is_require": true,
            "default_value": "",
            "place_holder": "请输入邮箱",
            "max_value": 20,
            "min_value": 2,
            "is_horizontal":false
        },
        {
            "type": "url",
            "title": "网址验证",
            "column_name": "url",
            "is_require": false,
            "default_value": "",
            "place_holder": "请输入网址",
            "max_value": 60,
            "min_value": 2,
            "is_horizontal":false
        },
        {
            "type": "identity",
            "title": "身份证验证",
            "column_name": "phone",
            "is_require": false,
            "default_value": "",
            "place_holder": "请输入身份证号码",
            "max_value": 20,
            "min_value": 2,
            "is_horizontal":false
        },
        {
            "type": "submit",
            "submittext": "保存1",
            "resettext": "重置2",
            "is_horizontal":false
        }
    ];
</script>

<script src="./render_input_form.js"></script>
<script src="./render_table.js"></script>



<script>
    // 生成录入表单
{
    var html = create_layui_input_form(array, "", "margin:10px;");
    var iframeHtml = $(`#preview_iframe`).get(0);

    var all_html =
        `
<link type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet" />
<script type="text/javascript" src="https://www.layuicdn.com/layui/layui.js"><\/script>

${html}

<script>
    layui.use('upload', function(){
        var $ = layui.jquery,
        upload = layui.upload;
        ${upload_render}
      
    });

    layui.use('laydate', function(){
        var laydate = layui.laydate;
        ${date_render}
    });

    layui.use('form', function(){
        var form = layui.form,
        $=layui.jquery;
        //监听提交
        form.on('submit(submit_form)', function(data){
        console.log(JSON.stringify(data.field));
        layer.msg(JSON.stringify(data.field));
        return false;
        });
        //回车触发函数
        $("input").keydown(function(event){
            if (event.keyCode == 13) {
                focusNextInput(this);
        }
    });
    });

    function focusNextInput(thisInput) {
        var inputs = document.getElementsByTagName("input");
        for(var i = 0;i<inputs.length;i++){
            // 如果是最后一个，则焦点回到第一个 
            if(i==(inputs.length-1)){
                inputs[0].focus(); 
                break;
            }else if(thisInput == inputs[i]){
                inputs[i+1].focus(); 
                break; //不加最后一行eles就直接回到第一个输入框
            }
        }
    }
     
    
    
<\/script>
`
    iframeHtml.contentWindow.document.write(all_html); // 动态写入返回页面到iframe
    iframeHtml.contentWindow.document.close();
}
</script>

</html>